<!--  -->
<script setup>
import { render } from '@/utils/markdown'

import data from './test.json'
import mfcHL from '@/misc/mfc_hl'


// onMounted(() => {
//   updateLineNumbers()
//   // document.getElementById('editor').addEventListener('mousedown', highlightCurLine)
//   // document.getElementById('editor').addEventListener('input', debounce(updateContent, 1000))

//   document.getElementById('editor').addEventListener('keydown', function (event) {
//     if (event.key === 'Enter') {
//       event.preventDefault()
//       const newLine = document.createElement('div')
//       newLine.classList.add('view-line')
//       newLine.innerHTML = '<br/>'
//       getElementAtCursor().parentElement.appendChild(newLine)
//       updateLineNumbers()

//       // 设置光标位置
//       let selection = window.getSelection()
//       let range = selection.getRangeAt(0)
//       range.selectNode(newLine)
//       range.collapse(true)
//       selection.removeAllRanges()
//       selection.addRange(range)
//     }
//   })
// })

// function debounce(func, wait) {
//   let timeout
//   return function (...args) {
//     clearTimeout(timeout)
//     timeout = setTimeout(() => func.apply(this, args), wait)
//   }
// }

// function updateContent(e) {

//   // 1.获取编辑光标所在元素
//   let el = getElementAtCursor()
//   console.log(el)

//   // 2.获取编辑光标所在元素的内容
//   let content = el.innerHTML
//   // 3.将编辑光标所在元素的内容替换为高亮后的内容
//   //  保存光标位置
//   let selection = window.getSelection()
//   let range = selection.getRangeAt(0)
//   let startOffset = range.startOffset

//   el.innerHTML = highlightCode(content)

//   //  重新设置光标位置
//   range.setStart(el.childNodes[0], startOffset)
//   range.setEnd(el.childNodes[0], startOffset)
//   selection.removeAllRanges()
//   selection.addRange(range)

//   updateLineNumbers()

// }

// function getElementAtCursor() {
//   const selection = window.getSelection()
//   // 确保有选中的内容
//   if (selection.rangeCount === 0) return null
//   // 获取第一个 Range 对象
//   const range = selection.getRangeAt(0)
//   // 从 Range 对象中获取光标所在的节点
//   const startNode = range.startContainer
//   // 确保 startNode 是一个元素节点
//   if (startNode.nodeType === Node.ELEMENT_NODE) {
//     return startNode
//   }
//   // 如果 startNode 是文本节点，则需要找到其父元素
//   if (startNode.nodeType === Node.TEXT_NODE) {
//     return startNode.parentNode
//   }
//   return null
// }

// function highlightCode(code) {
//   if (code[0] === '#') {
//     return `<span class="x-mfc-cmt">${code}</span>`
//   }
//   return code
// }

// function updateLineNumbers() {
//   const editor = document.querySelector('#editor')
//   const ln = document.querySelector('#ln')
//   let lnLabel = '<span></span>'.repeat(editor.querySelectorAll('div').length)

//   ln.innerHTML = lnLabel
// }

// function highlightCurLine(event) {
//   const lineElement = event.target.closest('.view-line')
//   if (lineElement) {
//     lineElement.classList.add('highlight')
//     const lines = document.querySelectorAll('.view-line')
//     lines.forEach(line => {
//       if (line !== lineElement) {
//         line.classList.remove('highlight')
//       }
//     })
//   }
// }

</script>

<template>
  <div class="view-wrapper">
    <div class="view-content">
      <div v-html="render(data[0])"></div>
      <div v-html="render(data[1])"></div>
    </div>
    <!-- <div class="editor-wrapper">
      <div class="editor-toolbar">
        <button>Action</button>
      </div>
      <div class="editor-container" tabindex="-1">
        <div id="ln"></div>
        <div id="editor" contenteditable="true" spellcheck="false" autocorrect="off" autocomplete="off"
          autocapitalize="off" translate="no" role="presentation" aria-multiline="true">
          <div class="view-line">
            <span class="x-mfc-cmt" :data-id="NT.comment"># comment</span>
          </div>
          <div class="view-line">
            <span class="x-mfc-key">key</span>
            <span class="x-mfc-sep"> : </span>
            <span class="x-mfc-val">val</span>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<style lang="scss">
pre {
  height: 100%;
}
</style>

<style scoped lang="scss">
$font-size: 15px;
$line-height: 22px;

.view-wrapper {
  flex: 1;
  font-family: monospace;
  background-color: var(--site-header-bgc);
  border-bottom: 1px solid var(--border-primary);
  box-shadow: 0px 3px 4px var(--site-home-shadow);
  min-height: 650px;
}

.view-content {
  min-height: 650px;
  display: grid;
  grid-template-columns: 50% 50%;
}

.view-header {
  background-color: var(--site-header-bgc);
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-primary);
}
</style>
